<script>
import { computed, defineComponent } from 'vue';
import FanIcon from '../icon/icon.vue';
import {
  createNamespace,
  transformStyleSize,
  getSystemInfo,
  transformSize,
} from '../utils';

export default defineComponent({
  name: createNamespace('NavBar')[0],
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true,
  },
  components: { FanIcon },
  props: {
    customStyle: [Object, String],
    /**
     * 导航栏背景，默认主题色-导航背景色
     */
    bg: String,
    /**
     * 导航文字颜色，默认主题色-前景色
     */
    fgColor: String,
    /**
     * 是否展示返回图标按钮
     */
    back: {
      type: Boolean,
      default: true,
    },
    backIcon: {
      type: String,
      default: 'left',
    },
    /**
     * 是否展示状态栏高度，状态栏相关设置仅对非H5生效
     */
    statusBar: {
      type: Boolean,
      default: true,
    },
    statusBarColor: String,
    /**
     * 是否展示标题栏
     */
    titleBar: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '',
    },
    /**
     * 标题字体大小，默认16PX
     */
    textSize: [String, Number],
    /**
     * 标题栏高度，默认 utils.getSystemInfo()——navBarHeight-statusBarHeight + 'PX'
     */
    height: [String, Number],
    /**
     * 是否固定在顶部
     */
    fixed: {
      type: Boolean,
      default: true,
    },
    /**
     * 固定在顶部时是否开启占位
     */
    placeholder: {
      type: Boolean,
      default: true,
    },
    zIndex: {
      type: Number,
      default: 90,
    },
    border: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['back'],
  setup(props, context) {
    const { navBarHeight, statusBarHeight } = getSystemInfo();

    const wrapperStyle = computed(() => {
      const { fgColor, height } = props;
      const titleHeight = !height
        ? navBarHeight - statusBarHeight + 'px'
        : transformSize(height);
      let s = `--fan-title-bar-height:${titleHeight};--fan-status-bar-height:${statusBarHeight}px;`;
      if (fgColor) s += `--fan-nav-bar-fg-color:${fgColor};`;
      return s;
    });
    const theStyle = computed(() => {
      const { customStyle, bg, zIndex, textSize } = props;
      let s = `z-index:${zIndex};`;
      if (textSize) s += `font-size:${transformSize(textSize)};`;
      if (bg) s += `background:${bg};`;
      return transformStyleSize(customStyle) + s;
    });
    const statusBarStyle = computed(() => {
      return props.statusBarColor ? `background:${props.statusBarColor};` : '';
    });
    const placeholderStyle = computed(() => {
      const { statusBar, titleBar, fixed } = props;
      if (!fixed) return '';
      let h = '0';
      if (statusBar && titleBar)
        h = 'calc(var(--fan-status-bar-height) + var(--fan-title-bar-height))';
      else if (statusBar) h = 'var(--fan-status-bar-height)';
      else if (titleBar) h = 'var(--fan-title-bar-height)';

      return `height:${h};`;
    });
    const backClick = () => context.emit('back');

    return {
      wrapperStyle,
      theStyle,
      statusBarStyle,
      placeholderStyle,
      backClick,
    };
  },
});
</script>

<template>
  <div class="fan-nav-bar-wrap" :style="wrapperStyle">
    <div
      v-if="fixed && placeholder"
      :style="placeholderStyle"
      class="fan-nav-bar__place"
    ></div>

    <div
      :style="theStyle"
      class="fan-nav-bar"
      :class="{ 'fan-nav-bar--fixed': fixed, 'fan-hairline--bottom': border }"
    >
      <div
        v-if="statusBar"
        :style="statusBarStyle"
        class="fan-nav-status-bar"
      ></div>
      <div v-if="titleBar" class="fan-nav-title-bar">
        <div class="fan-nav-bar__l">
          <FanIcon
            v-if="back"
            :name="backIcon"
            :size="18"
            custom-style="padding: 8px 16px"
            @click="backClick"
          />
        </div>
        <div v-if="title" class="fan-ellipsis fan-nav-bar__title">
          {{ title }}
        </div>
        <slot />
        <div class="fan-nav-bar__r">
          <slot name="right" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.fan-nav-bar-wrap {
  /* prettier-ignore */
  --fan-title-bar-height: 44PX;
  --fan-status-bar-height: 0px;
  --fan-nav-bar-fg-color: var(--fan-navigation-fg-color);
}

.fan-nav-bar {
  color: var(--fan-nav-bar-fg-color);
  /* prettier-ignore */
  font-size: 16PX;
  background-color: var(--fan-navigation-color);

  &--fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
  }

  &__l,
  &__r {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  &__l {
    left: 0;
  }

  &__r {
    right: 0;
  }

  &__title {
    font-weight: bold;
    max-width: 60%;
  }
}

.fan-nav-status-bar {
  height: var(--fan-status-bar-height);
}

.fan-nav-title-bar {
  position: relative;
  height: var(--fan-title-bar-height);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
